<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>鋆石机器人</title>
    <link rel="stylesheet" href="/static/css/logincss.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .ui.floating.message {
            width: 400px;
            height: 80px;
            margin-left: 20px;
            margin-top: 10px;
            background-color: #ffffff;
            position: absolute;
            display: none;
            -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
            box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
        }
    </style>

</head>
<body>
<div class="ui floating message">
    <p id="massage" class="layui-icon layui-icon-release"
       style="font-size: 30px; color: #3b82ec;text-align: center;line-height: 80px;"></p>
</div>
<div id="root">
    <div id="page-container">
        <main id="main-container" class="v2board-background">
            <div class="no-gutters" style="height: 100%;">
                <div class=""
                     style="max-width: 450px;top: calc(50% - 182.5px); position: absolute; right: 0px; left: 0px; margin: auto;">
                    <div class="block block-rounded block-transparent block-fx-pop w-100 mb-0 overflow-hidden bg-image"
                         style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0.5rem 2rem;">
                        <div class="row no-gutters">
                            <div class="col-md-12 order-md-1 bg-white">
                                <div class="block-content block-content-full px-lg-4 py-md-4 py-lg-4">
                                    <div class="mb-2 text-center"><a class="link-fx font-w700 font-size-h1"
                                                                     href="javascript:void(0);"><span class="text-dark">鋆石智能机器人</span></a>
                                        <p class="text-uppercase font-w700 font-size-sm text-muted">千里之行始于足下</p></div>
                                    <div class="form-group"><input type="text" class="form-control form-control-alt"
                                                                   placeholder="账号" name="account"></div>
                                    <div class="form-group"><input type="password" class="form-control form-control-alt"
                                                                   placeholder="密码" name="password"></div>
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-block btn-hero-primary" id="login">
                                            <span>登入</span></button>
                                        <div class="text-center mt-3"><a class="font-w700 font-size-sm text-muted"
                                                                         href="javascript:void(0);">------------------------</a>
                                            <div class="ant-divider ant-divider-vertical" role="separator"></div>
                                            <a class="font-w700 font-size-sm text-muted"
                                               href="javascript:void(0);">人生若只如初见，何事秋风悲画扇</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/axios.js"></script>

<!--<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>-->

<script>
    layui.use(['element', 'jquery'], function () {
        const element = layui.element,
            $ = layui.$,
            layer = layui.layer;

        $("#login").click(function () {
            const params = {
                "userAccount": $("input[name=account]").val(),
                "userPassword": $("input[name=password]").val()
            };
            $.ajax({
                url: '/login',
                type: 'post',
                data: JSON.stringify(params),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    console.log(data)
                    if (data.code == 200) {
                        window.sessionStorage.setItem("users", JSON.stringify(data.result.principal));//保存当前登录信息
                        window.sessionStorage.setItem("userssys", JSON.stringify(data.result.userSysPrivilege));//保存当前权限
                        $(location).prop('href', '/home')
                    }
                    if (data.code == 500 || data.code == -1) {
                        //配置一个透明的询问框
                        $("#massage").html("");
                        $("#massage").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + data.message);
                        const disstatus = $(" .ui.floating.message").css("display");
                        if (disstatus == "none") {
                            $(" .ui.floating.message").slideDown();
                        }

                        setTimeout(function () {
                            if ($(" .ui.floating.message").css("display") == 'block') {
                                $(" .ui.floating.message").slideToggle();
                            }
                        }, 5000)
                    }
                }
            })
        })
    })
</script>
</html>
